import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import { Button, Dialog, List, Picker, Toast } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { history } from 'umi'
import {
    fetchClassDetail,
    fetchPublishableEvaluates,
    fetchTeachContents,
    publishEvaluate,
} from '../api'
import { objToPickerArgs, getPickerSelectedLabel } from './util'
import { SkeletonTitleWrap } from '@/components/Common/Skeleton'
import type { ClassDetail } from '../index/interface'
import type { PickerColumn, PickerValue } from 'antd-mobile/es/components/picker-view'

export const EvaluatePublish = () => {
    const historyQuery = history.location.query as { id: string }
    // 班级ID
    const id = Number(historyQuery.id)

    const [loading, setLoading] = useState<boolean>(false)
    const [classDetail, setClassDetail] = useState<ClassDetail>()
    const [evaluates, setEvaluates] = useState<PickerColumn[]>([])
    const [teachContents, setTeachContents] = useState<PickerColumn[]>([])
    const [targetEvaluate, setTargetEvaluate] = useState<PickerValue[]>([])
    const [targetTeachContent, setTargetTeachContent] = useState<PickerValue[]>([])

    // 是否需要关联教学内容
    const shouldSelectTeachContent = teachContents.flat().length > 0
    // 是否可以发布
    const canPublish =
        targetEvaluate.length > 0 &&
        (shouldSelectTeachContent ? targetTeachContent.length > 0 : true)

    // 发布
    const onPublish = () => {
        if (!canPublish) return

        const tipContent = `确认发起${classDetail?.name}${getPickerSelectedLabel(
            evaluates,
            targetEvaluate,
        )}`

        Dialog.confirm({
            title: '确认发起',
            content: tipContent,
            onConfirm: async () => {
                const params = {
                    // 班级ID
                    gid: id,
                    // 评估表ID
                    id: targetEvaluate[0],
                    // 教学内容ID
                    lesson_id: targetTeachContent[0],
                }
                await publishEvaluate(id, Number(targetEvaluate[0]!), params)
                Toast.show({ icon: 'success', content: '发起成功' })
                history.goBack()
            },
        })
    }

    useEffect(() => {
        // 初始化质量评估表
        const initOptions = async () => {
            const { data } = await fetchPublishableEvaluates(id)
            setEvaluates([objToPickerArgs(data)])
        }
        const initClassDetail = async () => {
            const { data } = await fetchClassDetail(id)
            setClassDetail(data)
        }
        const initData = async () => {
            try {
                setLoading(true)
                initClassDetail()
                initOptions()
            } finally {
                setLoading(false)
            }
        }
        initData()
    }, [id])

    useEffect(() => {
        // 根据质量评估表加载教学内容
        if (targetEvaluate.length === 0) return
        const initTeachContents = async () => {
            const { data } = await fetchTeachContents(id, Number(targetEvaluate[0]))
            setTeachContents([objToPickerArgs(data)])
        }
        initTeachContents()
    }, [id, targetEvaluate])

    return (
        <div>
            <NavBar title="发起评估" />
            <div className={styles.page}>
                <SkeletonTitleWrap animated loading={loading}>
                    <div className={styles.title}>{classDetail?.name || '-'}</div>
                </SkeletonTitleWrap>

                <List>
                    <Picker
                        columns={evaluates}
                        value={targetEvaluate}
                        onConfirm={v => {
                            setTargetEvaluate(v)
                        }}
                    >
                        {(_, actions) => (
                            <List.Item onClick={actions.open}>
                                <div className={styles.listItem}>
                                    <div className={styles.itemLabel}>质量评估表*</div>
                                    <span className={styles.blockText}>
                                        {getPickerSelectedLabel(evaluates, targetEvaluate)}
                                    </span>
                                </div>
                            </List.Item>
                        )}
                    </Picker>

                    {teachContents.flat().length > 0 && (
                        <Picker
                            columns={teachContents}
                            value={targetTeachContent}
                            onConfirm={v => {
                                setTargetTeachContent(v)
                            }}
                        >
                            {(_, actions) => (
                                <List.Item onClick={actions.open}>
                                    <div className={styles.listItem}>
                                        <div className={styles.itemLabel}>教学内容*</div>
                                        <span className={styles.blockText}>
                                            {getPickerSelectedLabel(
                                                teachContents,
                                                targetTeachContent,
                                            )}
                                        </span>
                                    </div>
                                </List.Item>
                            )}
                        </Picker>
                    )}
                </List>

                <div className={styles.operate}>
                    <Button
                        className={styles.publishBtn}
                        disabled={!canPublish}
                        onClick={onPublish}
                    >
                        发起
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default EvaluatePublish
